{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>找回密码</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
    <script src="{% static 'js\reqwest.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css\semantic.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="{% static 'css\login.css' %}" media="screen" title="no title" charset="utf-8">
    <link rel="shortcut icon" type="" href="{% static 'images/python_512px_1118083_easyicon.net.png' %}">
</head>

<body id="app">
    <div class="bg">
        <div class="ui image logo">
            <img src="{% static 'images/bg-logo.png' %}" alt="" />
        </div>
        <div class="ui text menu">
            <a class="item" href="{% url 'register' %}">
                <!--<span><p class="outset" style="border-bottom:2px solid rgb(247, 250, 252);">请输入注册邮箱</p>-->
                <span class="outset">请输入注册邮箱：</span>
                <!--</span>-->
            </a>
            <a class="active item" href="#list/editors">
                <!--<span><p class="outset" style="border-bottom:2px solid #2185D0;">登录</p>-->
                </span>
            </a>
        </div>
        <div >
            <div class="ui vertical menu">
                <div class="item">
                    <div class="ui transparent input">
                        <input v-model="email" name="email" type="email" placeholder="邮箱" value="">
                    </div>
                </div>
                <div class="item">
                    <div class="ui transparent input">
                        <input name="code" type="code" placeholder="请输入验证码" value="">
                    </div>
                    <button v-on:click="SendEmail" class="ui blue button">获取验证码</button>
                </div>
            </div>
            <button class="ui blue button"  type="submit">获取验证码</button> {% csrf_token %}
        </div>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {
                SendEmail: function () {
                    var self = this;
                    reqwest({
                        url: '/api/send_email/',
                        type: 'json',
                        method: 'post',
                        data: {
                            email: self.email,
                        },
                        success: function (resp) {
                            console.log(resp);
                            alert('验证码发送成功，请查收')
                        },
                        error :function (resp) {
                            console.log(resp)
                            alert('邮箱地址不存在')
                        }
                    })
                },
            },
        })
    </script>
</body>

</html>